<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>就诊时间管理</span>
      </div>
      <div
        style="border: 1px solid #e5e5e5; border-radius: 15px; padding: 20px"
      >
        <el-button type="primary" @click="addM">新增</el-button>
        <el-form label-width="160px">
          <div v-for="(item, index) in ItemArr" :key="index">
            <el-form-item :label="'时间段' + (index + 1)">
              <el-row :span="24">
                <el-col :span="6">
                  <el-time-picker
                    value-format="HH:mm"
                    format="HH:mm"
                    v-model="item.value1"
                    placeholder="请选择开始日期"
                  ></el-time-picker>
                </el-col>
                <el-col
                  :span="2"
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                  >--
                </el-col>
                <el-col :span="6">
                  <el-time-picker
                    value-format="HH:mm"
                    format="HH:mm"
                    v-model="item.value2"
                    placeholder="请选择结束日期"
                    :picker-options="{
                      selectableRange: `${item.value1 + ':00'}-23:59:59`,
                    }"
                  ></el-time-picker>
                </el-col>
                <el-col :span="4" style="margin-left: 20px">
                  是否收取加班费
                  <el-switch v-model="item.value3"> </el-switch>
                </el-col>
                <el-col :span="2" style="display: flex">
                  <el-button type="danger" @click="deleM">删除</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </div>
        </el-form>

        <el-row
          style="
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: center;
          "
        >
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>客服管理</span>
      </div>
      <div
        style="border: 1px solid #e5e5e5; border-radius: 15px; padding: 20px"
      >
        <el-form label-width="160px">
          <el-form-item label="客服电话">
            <el-row :span="24">
              <el-input type="text" v-model="phone"></el-input>
            </el-row>
          </el-form-item>
        </el-form>
        <el-row
          style="
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: center;
          "
        >
          <el-button type="primary" @click="handleSetPhone">确定</el-button>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  ApiOrderTime,
  ApiAddOrderTime,
  ApiGetCustomerPhone,
  ApiSetCustomerPhone,
} from "@a/index";
import Editor from "@/components/editor.vue";
export default {
  components: {
    Editor,
  },
  data() {
    return {
      value1: "",
      value2: "",
      tabData: [],
      form: {},
      ItemArr: [{ value1: "", value2: "", value3: false }],
      phone: "",
    };
  },
  mounted() {
    this.getOrderTime();
  },
  methods: {
    // 添加
    addM() {
      this.ItemArr.push({
        value1: "",
        value2: "",
        value3: false,
      });
    },
    // 删除措施
    deleM() {
      if (this.ItemArr.length > 1) {
        this.ItemArr.pop({
          value1: "",
          value2: "",
          value3: false,
        });
      } else {
        this.$alert("最后一个无法删除！", "提示信息", {
          confirmButtonText: "确定",
        });
      }
    },

    getOrderTime() {
      let arr = [];
      ApiOrderTime().then((res) => {
        res.data?.forEach((item, index) => {
          if (item.time) {
            let val = item.time.split("-");
            arr.push({ value1: val[0], value2: val[1], value3: item.switch });
          }
        });
      });
      this.ItemArr = arr;
      ApiGetCustomerPhone().then((res) => {
        this.phone = res.data;
      });
    },
    handleSubmit() {
      /*    this.ItemArr.forEach((item) => {
        if (item.value1 > item.value2) {
          this.$message.error("添加失败，结束日期不能比开始日期大");
          return;
        }
      }); */
      ApiAddOrderTime({ arr: this.forMatterValue(this.ItemArr) }).then(
        (res) => {
          if (res.code == 200) {
            this.$message.success("添加成功");
            this.getOrderTime();
          }
        }
      );
    },
    handleSetPhone() {
      ApiSetCustomerPhone({ phone: this.phone }).then((res) => {
        if (res.code == 200) {
          this.phone = res.data;
          this.$message.success("修改成功");
          this.getOrderTime();
        }
      });
    },

    forMatterValue(arr) {
      let val = [];
      arr.forEach((item) => {
        val.push({
          time: item.value1 + "-" + item.value2,
          switch: item.value3,
        });
      });
      return val;
    },
  },
};
</script>
<style scoped></style>
